<!doctype html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    <div th:replace="home/module/_header"></div>

    <main id="tt-pageContent" data-page="1" data-type="category" th:data-id="${category.id}" class="tt-offset-small">
        <div class="tt-wrapper-section">
            <div class="container">
                <div class="tt-user-header">
                    <div class="tt-col-title">
                        <div class="tt-title">
                            [[${category.cateName}]]
                        </div>
                        <ul class="tt-list-badge">
                            <li>[[${category.cateDesc}]]</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="tt-tab-wrapper">
                    <div class="tt-topic-list">
                        <div class="tt-list-header">
                            <div class="tt-col-topic">标题</div>
                            <div class="tt-col-category">板块</div>
                            <div class="tt-col-value hide-mobile">点赞数</div>
                            <div class="tt-col-value hide-mobile">回复数</div>
                            <div class="tt-col-value hide-mobile">点击数</div>
                            <div class="tt-col-value">发布</div>
                        </div>
                        <div id="tt-item-wrapper" data-type="user" th:data-id="${category.id}">
                            <div class="tt-item" th:each="post : ${posts.records}">
                                <div class="tt-col-avatar">
                                    <img th:src="${post.user.userAvatar}" class="avatar" alt="">
                                </div>
                                <div class="tt-col-description">
                                    <h6 class="tt-title"><a th:href="'/post/'+${post.id}">
                                        [[${post.postTitle}]]
                                    </a></h6>
                                    <div class="row align-items-center no-gutters">
                                        <div class="col-11">
                                            <ul class="tt-list-badge">
                                                <li th:each="tag : ${post.tagList}"><a
                                                        th:href="'/tag/'+${tag.id}"><span
                                                        class="tt-badge">[[${tag.tagName}]]</span></a></li>
                                            </ul>
                                        </div>
                                        <div class="col-1 ml-auto show-mobile">
                                            <div class="tt-value">1d</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tt-col-category"><a th:href="'/category/'+${post?.category?.id}"><span
                                        th:class="'tt-color0'+${post?.category?.cateSort%9+1}+' tt-badge'">[[${post?.category?.cateName}]]</span></a>
                                </div>
                                <div class="tt-col-value  hide-mobile">[[${post.postLikes}]]</div>
                                <div class="tt-col-value tt-color-select  hide-mobile">[[${post.commentSize}]]</div>
                                <div class="tt-col-value  hide-mobile">[[${post.postViews}]]</div>
                                <div class="tt-col-value hide-mobile">[[${post.createTimeStr}]]</div>
                            </div>
                        </div>
                        <div id="no-data" class="tt-wrapper-inner"
                             th:style="${posts.current >= posts.pages ? 'display:block;' :'display:none;'}">
                            <h4 class="tt-title-separator"><span>已经到了末尾了</span></h4>
                        </div>

                        <div class="tt-row-btn" id="load-more-div" th:if="${posts.current < posts.pages}">
                            <button type="button" class="btn-icon js-topiclist-showmore" id="load-more-btn"
                                    data-no="1">
                                <svg class="tt-icon">
                                    <use xlink:href="#icon-load_lore_icon"></use>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>


    <div th:replace="home/module/_footer"></div>
